<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<link rel="stylesheet" type="text/css"  media="screen" href="style/previous/citportal.css" />-->
<link rel="stylesheet" type="text/css"  media="screen, projection" href="style/previous/tutorial1.css" />
<script type="text/javascript">
    function checkAnswer(num)
    {
        var element = document.getElementById('answer');


        if(num==256)
        {
            element.style.border = "1px solid #000";
            element.innerHTML = "You are correct! There are two choices per option: <span style='color: red;'>Selected</span> and ";
            element.innerHTML += "<span style='color: red'>Unselected</span>. <br /><br />Since there are 8 options, with 2 choices each, we have 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2,2<sup>8</sup>, or 256  configurations.";
        }
        else
        {
            element.innerHTML = num + " is not the right answer. <br /><br />To find the answer,count the number of choices for each option and multiply the number of choices from all options together."
        }

    }

    function checkOA(num)
    {
        var element = document.getElementById('answer');

        if(num==4)
        {
            element.innerHTML = "Correct, N = 16, s = 2 for k = 6 columns and s = 4 for k = 3 columns with strength 2.";
        }
        else if(num==1)
        {
            element.innerHTML = "Incorrect, remember that N represents the number of rows";
        }
        else if(num==2)
        {
            element.innerHTML = "Incorrect, how many columns contain just 2 values?";
        }
        else if(num==3)
        {
            element.innerHTML = "Incorrect, look at the values of k and the total number of columns in the Mixed Orthogonal Array";
        }
        else if(num==5)
        {
            element.innerHTML = "Incorrect, remember the index is found by &#955=N/s<sup>t</sup>, what value do you get if t is equal to 3 and s is equal to 4? ";
        }

    }


    function next_step()
    {
        var i = 1;
        var frame = document.getElementById(i);
        document.getElementById('back_float').style.visibility="visible";
        while(frame)
        {
            if(frame.style.display == 'block')
            {
                make_visible = document.getElementById(i + 1);
                if(make_visible)
                {
                    frame.style.display = 'none';
                    make_visible.style.display = 'block';
                }
                i = i + 2;
                frame = document.getElementById(i);
                if(!frame)
                    document.getElementById('forward_float').style.visibility="hidden";
                break;
            }
            i = i + 1; 
            frame = document.getElementById(i);
        }
    }

    function page()
    {
        var i = 1;
        var check = <?php echo $start?>;
        if(check == i){
            var frame = document.getElementById(i);
            make_visible = document.getElementById(check);
            frame.style.display = 'none';
            make_visible.style.display = 'block';
        } 
        else{
            var frame = document.getElementById(i);
            make_visible = document.getElementById(check);
            frame.style.display = 'none';
            make_visible.style.display = 'block';
            document.getElementById('back_float').style.visibility="visible";
        }
    }

    function back_step()
    {
        var i = 1;
        var frame = document.getElementById(i);
        while(frame)
        {
            if(frame.style.display=='block')
            {
                make_visible = document.getElementById(i-1);
                if(make_visible)
                {
                    frame.style.display = 'none';
                    make_visible.style.display = 'block';
                    document.getElementById('forward_float').style.visibility="visible";
                }
                if(i==2) document.getElementById('back_float').style.visibility="hidden";
                break;
            }
            i = i + 1; 
            frame = document.getElementById(i);
        }

    }
</script>
<body onLoad="page( <?php echo $start?>)"> 
    <div id="header"><h3>Overview Tutorial</h3></div>
    <hr> 
    <div id="box">
        <div class="row">
            <a href="#" class="seven columns" id="back_float"onclick="back_step()" style='text-align: left; visibility:hidden; background-color: rgb(176, 209, 240)'>
                <h4><i class="icon-left-bold"></i>Previous</h4>
            </a>

            <a href="#" class="seven columns" id="forward_float" onclick="next_step()" style="text-align: right; visibility: visible; background-color: rgb(176, 209, 240)">
                <h4>Next <i class="icon-right-bold"></i></h4>
            </a>
        </div>
        <!--- box border --> 
        <div id="blc"><div id="brc"> 
                <div id="tlc"><div id="trc"> 
                        <!--  -->	
                        <div class="rbcontent" style="padding: 10px"> 


                            <!--Frame 1-->
                            <div id="1" style="display:block;" >
                                <div id="contentBox_wide_xl"><p>Objectives. </p></div>
                                <div id="contentBox"><p>Combinatorial Interaction
                                        Testing (CIT) is a black box system testing technique that
                                        samples inputs, configurations and parameters and combines them
                                        in a systematic fashion. <br /><br />When
                                        used properly it can be a powerful tool in the hands of a
                                        software tester.</p></div>
                                <div id="contentBox"><p> Goals:<br /> <br />1. Gain an understanding of the basic
                                        principles behind CIT.  <br /> <br />2. Learn what makes CIT a powerful tool for software testers.</p></div>
                            </div>

                            <!--Frame 2-->
                            <div id="2" style="display:none;" >
                                <div id="contentBox_wide"><p>First let's take a look at
                                        the origins of CIT.  The concepts behind CIT were first
                                        introduced in the mathematical study of Combinatorics.  <br
                                            /> <br /> Combinatorics is the study of enumeration, combination
                                        and permutation of sets of elements and the mathematical
                                        relations that characterize their properties. </p></div>
                                <div id="contentBox"><p>Written around 300 BC the
                                        Bhagabati Sutra was one of the earliest books to feature a
                                        problem dealing with combinatorics. </p></div>
                                <div id="contentBox" ><p> The problem was that given 6 
                                        spices, how many ways were there to
                                        select combinations of one, two and three spices. <br/>
                                        Let's solve using the choose function .</p></div>  
                            </div>

                            <!--Frame 3-->
                            <div id="3" style="display:none;" >
                                <div id="contentBox_wide_xl"><p>Choose function </p></div>
                                <div id="contentBox"><p>Given a number <span style='font-style:italic;'>n</span> and a number 
                                        <span style='font-style:italic;'>r</span>, where 0 &#8804 <span style='font-style:italic;'> r </span> 
                                        &#8804 <span style='font-style:italic;'>n</span>, the choose function is a way of
                                        determining the number of distinct <span style='font-style:italic;'>r</span>-element subsets that exist
                                        within <span style='font-style:italic;'>n</span>-elements.  <br /> Mathematicaly it can be
                                        represented by the formula <br /><img
                                            src='public/tutorials/images/choose.gif'/><br /><br /> Now lets solve the problem.</p></div>
                                <div id="contentBox"><p><img src='public/tutorials/images/choose1.gif'/><br /><br /> <img
                                            src='public/tutorials/images/choose2.gif'/><br /><br /> <img src='public/tutorials/images/choose3.gif'/><br /><br /> <img
                                            src='public/tutorials/images/choose4.gif'/><br /><br /> <img src='public/tutorials/images/choose5.gif'/> </p></div>
                            </div>

                            <!--Frame 4-->
                            <div id="4" style="display:none;" >
                                <div id="contentBox_wide"><p>Given 6 different spices
                                        there are 6 different ways to choose 1 spice, 15 different ways
                                        to choose 2, and 20 different ways to choose 3 adding up to a
                                        total of 41 combinations.<br
                                            /> <br /> The more common use of the choose function is found
                                        within Pascal's Triangle.</p></div>
                                <div id="contentBox"><p> Pascal's Triangle is defined as
                                        a triangular array of the binomial coefficents in a triangle.
                                        This means that Pascal's Triangle can actually be created by
                                        using the choose function.</p></div>
                                <div id="contentBox"><p> An example should illustrate
                                        what we mean.</p></div>  
                            </div>

                            <!-- Frame 5 -->
                            <div id="5" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Pascal's Triangle</p></div><br />
                                <table style ='width:80%;  margin-left:8%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> This is Pascal's Triangle built
                                                        up to the 5th row.  <br /><br /> You can see how each entry can be
                                                        found by summing together the two entries directly above it in the
                                                        triangle. <br /><br />  So where does the choose function come in?</p></div></td>
                                            <td><?php echo PT1(); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 6 -->
                            <div id="6" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Pascal's Triangle</p></div><br />
                                <table style ='width:80%;  margin-left:8%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> Start with any row you want, let's say row <font color ='red'>4</font>.  <br
                                                            /><br /> Next choose an entry from that row. Our options go from 0 to 4, so we'll randomly pick <font color = 'red'>2</font>.<br /><br />
                                                        Now what do you think <font color ='red'>4</font> choose <font color = 'red'>2</font> is going to be?</p></div></td>
                                            <td><?php echo PT2(); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 7 -->
                            <div id="7" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Pascal's Triangle</p></div><br />
                                <table style ='width:80%;  margin-left:8%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> The correct answer is <font color = 'red'>6</font>.<br
                                                            /><br /> The entire Triangle is built such that you can find the
                                                        value of any entry based on its row and the order it
                                                        occurs in. <br /><br /> Note that given a number <span style='font-style:italic;'>n</span>, 
                                                        <span style='font-style:italic;'>n</span> choose 0 or <span style='font-style:italic;'>n</span>
                                                        choose <span style='font-style:italic;'>n</span> both equal 1.</p></div></td>
                                            <td><?php echo PT3(); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 8-->
                            <div id="8" style="display:none;" >
                                <div id="contentBox_wide"><p> The choose function is a
                                        very powerful tool in the study of statistics, which 
                                        ties into combinatorics.<br
                                            /> <br /> The next major step came with the Father of modern
                                        statistical science, Ronald Fisher.</p></div>
                                <div id="contentBox"><p> R.A. Fisher was an english
                                        statistician whose work included a methodology for designing
                                        experiments that serves as the basis for many of the principals
                                        of CIT.</p></div>
                                <div id="contentBox"><p>In addition, his work on "Studies
                                        in Crop Rotation" provide an excellent example of testing using
                                        orthogonal arrays.</p></div>  
                            </div>

                            <!--Frame 9-->
                            <div id="9" style="display:none;" >
                                <div id="contentBox_wide"><p> The goal of these experiments was to find the effects of mixing different 
                                        combinations of potato and fertilizer. <br /> To do this the field was layed out in a grid broken up
                                        using an orthogonal array (these will be covered in a later tutorial).</p></div>
                                <div id="contentBox"><p> The concept was radical because it provided a way to statistically analyise data 
                                        that differed by a number of factors or combination of factors.  The existing approach was  
                                        changing one factor at a time which was relatively inefficent.</p></div>
                                <div id="contentBox"><p> Now that you have some backround knowledge on the subject let's turn our attention 
                                        to the main topic, CIT.</p></div>  
                            </div>

                            <!--Frame 10-->
                            <div id="10" style="display:none;" >
                                <div id="contentBox_wide"><p> One of the major aspects
                                        of CIT is finding out what to test.<br
                                            /> <br /> For instance a web browser has many configurations
                                        that may change the way you view or access data over the web.</p></div>
                                <div id="contentBox"><p>It is very important that all the configurations work
                                        with each other and do not negatively affect your ability to use
                                        the internet. </p></div>
                                <div id="contentBox"><p> Let's take a closer look at a
                                        web browser example.</p></div>  
                            </div>

                            <!-- Frame 11 -->
                            <div id="11" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> Consider a problem that only occurs if
                                                        you select <font color='red'>Allow content to Load</font> and 
                                                        <font color='red'>Block all cookies</font>.<br /><br />  Random testing might not
                                                        pair these two options together and if so the problem would never be detected.<br /><br /></p></div></td>
                                            <td><?php echo configurations(0); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 12 -->
                            <div id="12" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> CIT is used to design tests that
                                                        focus on catching these kinds of errors.<br /><br /> The first step
                                                        is going to be finding out all the different configuration combinations.</p></div></td>
                                            <td><?php echo configurations(0); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 13 -->
                            <div id="13" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> As you can see, we have four main categories: <ul><li>Content</li>
                                                        <li>Cookies</li><li>Security</li><li>History</li></ul> For CIT we want to look beyond these sort of boundries 
                                                    and expand out all configurations.</p></div></td>
                                            <td><?php echo configurations(1); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 14-->
                            <div id="14" style="display:none;" >
                                <?php echo options(0); ?>  
                                <div id="contentBox_wide"><p>Here we have made a table of all the browser options and their possible settings. <br /><br />
                                        In CIT the options are more commonly refered to as factors and their settings are either values or levels.</p></div>
                            </div>

                            <!-- Frame15 -->
                            <div id="15" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>Under content is a drop down box
                                                        with 3 values. <br /><br /> Content also has a check box that can
                                                        either be <span style="color: red;"> checked</span> or <span style="color: red;">unchecked.</span></p></div></td>
                                            <td><?php echo configurations(2); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 16-->
                            <div id="16" style="display:none;" >
                                <?php echo options(2); ?><br /><br />
                                <div id="tutorial_two_mult" style='margin-left:3%;'><span id="mult">3</span> x <span id="mult">2</span></div>
                                <div id="contentBox_wide"><p>Multiplying the first two
                                        columns, <br /> We have <span style="color: red;">3 x 2</span> ,
                                        or <span style="color: red;"> 6</span>,  possible configurations.</p></div>
                            </div>

                            <!-- Frame 17 -->
                            <div id="17" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> Under cookies is a drop down box with 3 values.</p></div></td>
                                            <td><?php echo configurations(3); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 18-->
                            <div id="18" style="display:none;" >
                                <?php echo options(3); ?><br /><br />
                                <div id="tutorial_two_mult" style='margin-left:3%;'><span id="mult">3</span> x <span id="mult">2</span> x <span id="mult">3</span></center></div>
                                <div id="contentBox_wide"><p>For each of the <span
                                            style="color: red;">6</span> content values,  we have <span
                                            style="color: red;">3 </span> cookies values. <br /><br />
                                        We multiply our previous <span style="color: red;">6
                                        </span> by <span style="color: red;">3 </span> and we get <span
                                            style="color: red;">18</span>  configuration possibilities.</p></div>
                            </div>


                            <!-- Frame 19 -->
                            <div id="19" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>Security has three check boxes
                                                        that can be either <span style="color: red;">checked </span> or
                                                        <span style="color: red;"> unchecked</span>.</p></div></td>
                                            <td><?php echo configurations(4); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 20-->
                            <div id="20" style="display:none;" >
                                <?php echo options(6); ?>  <br /><br />
                                <div id="tutorial_two_mult" style='margin-left:3%;'><span id="mult">3</span>
                                    x <span id="mult">2</span> x <span id="mult">3</span> x <span
                                        id="mult"> 2</span> x <span id="mult">2</span> x <span id="mult">2</span></div>
                                <div id="contentBox_wide"><p>We continue to multiply all
                                        configuration options resulting in  <span style="color: red;">128</span> configurations</p></div>
                            </div>


                            <!-- Frame 21 -->
                            <div id="21" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web browser Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> And finally, history has two
                                                        check boxes that can be either <span style="color: red;">
                                                            checked</span> or  <span style="color: red;">unchecked.</span></p></div></td>
                                            <td><?php echo configurations(5); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 22-->
                            <div id="22" style="display:none;" >
                                <?php echo options(8); ?> <br /><br />
                                <div id="tutorial_two_mult" style='margin-left:3%;'><span id="mult">3</span> x <span
                                        id="mult">2</span> x <span id="mult">3 </span> x <span
                                        id="mult">2</span> x <span id="mult">2 </span> x <span
                                        id="mult">2</span> x <span id="mult">2 </span> x <span id="mult">2</span></div>
                                <div id="contentBox_wide"><p>Once again, we multiply by
                                        2 for each option resulting in a total of <span style="color:
                                                                                        red;"> 576</span> configurations.</p></div>  
                            </div>

                            <!--Frame 23-->
                            <div id="23" style="display:none;" >
                                <div id="contentBox_wide"><p>For each of the 576 configurations there can be a number of tests to run,
                                        clearly not the most efficient design.<br
                                            /> <br />CIT can be used to generate a much smaller amount of
                                        configurations that will not cover all combinations but instead will
                                        cover all pairwise combinations between factors.</p></div>
                                <div id="contentBox"><p>The more difficult aspect of CIT
                                        is finding what the actual tests should be.</p></div>
                                <div id="contentBox"><p>Before we go into that here is a
                                        quick question to make sure you understand how to find the number of configurations.</p></div>  
                            </div>


                            <!--Frame 24 -->
                            <div id="24" style="display: none;">
                                <div id="contentBox_wide_xl" style='font-size:155%;'><p>Quiz </p></div>
                                <div id="contentBox"><p>Look at this example.<br/><br/> How many
                                        configurations are possible? </p>
                                    <div id="tutorial_two_quiz"><br />
                                        <form id="tutorial_quiz" name="frame1" action="#" method="POST">
                                            <table><tr><td><input onclick="checkAnswer(8)" type="radio" name="frame1" value="8" />8</td>
                                                    <td><input onclick="checkAnswer(64)" type="radio" name="frame1" value="64" />64</td>
                                                    <td><input onclick="checkAnswer(987)" type="radio" name="frame1" value="987" />987</td>
                                                    <td><input onclick="checkAnswer(256)" type="radio" name="frame1" value="256" />256</td>
                                                    <td><input onclick="checkAnswer(3125)" type="radio" name="frame1" value="3125" />3125</td></tr></table>
                                        </form>

                                    </div></div>
                                <div id="form_quiz_tutorial_two">
                                    <div id="header_form_tutorial_two">Font Effects</div><br />
                                    <table>
                                        <tr>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Strikethrough</span></td>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Shadow</span></td></tr>
                                        <tr>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Double Strikethrough</span></td>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Outline</span></td></tr>
                                        <tr>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Superscript</span></td>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Emboss</span></td></tr>
                                        <tr>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Engrave</span></td>
                                            <td><span><input type="checkbox" name="popups" value="ON" />Subscript</span></td></tr></table>
                                    <span id="buttons_tutorial_two"><input type="submit" value="Cancel" name="frame4_cancel" /><input type="submit" value="Submit" name="frame4_submit" /></span>
                                </div>

                                <div id="answer"></div>
                            </div>

                            <!--Frame 25-->
                            <div id="25" style="width:100%; display: none;">
                                <?php echo options2(); ?>
                                <div id="tutorial_two_mult" ><span id="mult" style="margin-left: 15px; margin-right: 15px;">2</span>
                                    x <span id="mult" style="margin-left: 35px; margin-right: 35px;">2</span> 
                                    x <span id="mult" style="margin-left: 10px; margin-right: 5px;">2</span>
                                    x <span style="margin-left: 20px; margin-right: 18px;">2</span>
                                    x <span style="margin-left: 18px; margin-right: 18px;">2</span>
                                    x <span style="margin-left: 18px; margin-right: 18px;">2</span>
                                    x <span style="margin-left: 18px; margin-right: 18px;">2</span>
                                    x <span style="margin-left: 14px; margin-right: 14px;">2</span></div>
                                <div id="contentBox_wide"><p>Here you can see how we multiplied all
                                        of our options to get the total number of configurations.<br
                                            /><br /> The question is what to do with this information?</p></div>
                            </div>

                            <!--Frame 26-->
                            <div id="26" style="display:none;" >
                                <div id="contentBox_wide"><p>Creating functional tests derived from software's specifications 
                                        is not a new concept. In June of 1988 Thomas J. Ostrand and Marc J Balcer published a paper on The Category Partition 
                                        Method for Specifying and Generating Functional Tests <br />The concepts in this paper served as an early guide to what CIT is accomplishing.</p></div>
                                <div id="contentBox"><p>The Test Specifiaction Language outlined in the paper could be used to
                                        reduce the number of configurations by using constraints created by the tester.</p></div>  
                                <div id="contentBox"><p> For example a constraint on the quiz question might be that both Strikethrough and Double Strikethrough cannot
                                        selected at the same time.</p></div>

                            </div>

                            <!--Frame 27-->
                            <div id="27" style="display:none;" >
                                <div id="contentBox_wide"><p>However, because the constraints have to be entered by the tester the process is slow
                                        and in the end does not guarantee a reasonable set of configurations to test.<br /><br />CIT will instead sample the
                                        exhaustive set of configurations by focusing on the interactions between factors.  The sample size can be increased by increasing 
                                        the strength of the interactions between factors.</p></div>
                                <div id="contentBox"><p>This means that testing every pairwise combination will have less tests, but might not catch 
                                        some problems that arise when testing all 3-way combinations</p></div>
                                <div id="contentBox"><p>Let's look at an easy example and try to find the pairwise combinations by hand.</p></div>  
                            </div>

                            <!-- Frame 28 -->
                            <div id="28" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects Configuration</p></div><br />
                                <table style ='width:75%;  margin-left:15%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>First we will find out how many
                                                        configurations exist for this example and what they are.</p></div></td>
                                            <td><?php echo par_effects(0); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 29 -->
                            <div id="29" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects Configuration</p></div><br />
                                <table style ='width:85%;  margin-left:10%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> Paragraph spaces has two values:
                                                        <span style="color: red;"> selected</span> and <span style="color:
                                                                                                             red;">unselected.</span><br /<br /> Mirror indents has two values:
                                                                                                             <span style="color: red;">selected</span> and <span style="color: red;">unselected.</span><br /<br />
                                                                                                             And finally, line spacing has three values: <span style="color: red;">single</span>, 
                                                        <span style="color: red;">multiple</span> and <span style="color: red;">double.</span></p></div></td>
                                            <td><?php echo par_effects(1); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 30-->
                            <div id="30" style="display:none;" >
                                <?php echo par_options(); ?><br /><br />
                                <div id="tutorial_two_mult"><span id="mult" style="margin-left: 150px; margin-right: 60px;">2</span> 
                                    x <span id="mult" style="margin-left: 20px; margin-right: 20px;">2</span>
                                    x <span id="mult" style="margin-left: 20px; margin-right: 16px;">3</span></div>
                                <div id="contentBox_wide"><p>We multiply all values to
                                        get the total number of configurations which is <span style="color:red;">12</span></p></div>
                            </div>

                            <!-- Frame 31 -->
                            <div id="31" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:60%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>Here is the enumerated list of all
                                                        possible configurations.<br /><br />  In term of software testing a
                                                        large number of test suites could be used to check each of these
                                                        different configurations.</p></div></td>
                                            <td><?php echo all_configurations(0); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 32 -->
                            <div id="32" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:60%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>Instead of checking all
                                                        configurations we can look at only the 2-way (pairwise)
                                                        combinations.<br /><br />  This will reduce the total number of
                                                        possible test suite configurations.</p></div></td>
                                            <td><?php echo all_configurations(1); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 33 -->
                            <div id="33" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:60%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>First we look at all the
                                                        combinations of values between line spacing and indent selection.</p></div></td>
                                            <td><?php echo all_configurations(2); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 34 -->
                            <div id="34" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:60%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>Next we examine the combinations of
                                                        values between indent selection and paragraph selection.</p></div></td>
                                            <td><?php echo all_configurations(3); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 35 -->
                            <div id="35" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:60%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>Finally we look at the
                                                        combinations of values between line spacing and paragraph selection.</p></div></td>
                                            <td><?php echo all_configurations(4); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 36 -->
                            <div id="36" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:60%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>By eliminating the configurations
                                                        that repeat already tested pairwise combinations and some simple
                                                        shuffling around you can create this array of 6 different configurations.</p></div></td>
                                            <td><?php echo subset(); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 37 -->
                            <div id="37" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Paragraph Effects</p></div><br />
                                <table style ='width:65%;  margin-left:7%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p>The creation of these tables,
                                                        which are a type of covering array, is the main focus of CIT.<br
                                                            /><br /> Even in this simple example the number of
                                                        configurations to test has been reduced from 12 to 6.</p></div></td>
                                            <td><?php echo subset(); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!--Frame 38-->
                            <div id="38" style="display:none;" >
                                <div id="contentBox_wide"><p>In this small example it
                                        wasn't too difficult to create the pairwise covering array by
                                        hand, however when dealing with systems that thousands or even hundreds of configurations
                                        this is not feasable. <br /><br />There exist a large number of generated arrays of
                                        varying strengths found online that can be referenced  (Some examples
                                        found under links) in addition to programs that exist which can generate
                                        covering arrays given some input.</p></div>
                                <div id="contentBox"><p> Remember the web configuration
                                        example that had 576 configurations?</p></div>
                                <div id="contentBox"><p>Let's see how we might run it through a program</p></div>  
                            </div>

                            <!--Frame 39-->
                            <div id="39" style="display:none;" >
                                <?php echo options(); ?><br /><br />
                                <div id="contentBox"><p> The goal is to create a covering array that will guarantee that 
                                        all pairwise combinations of these factors will be tested.  <br /><br /> To use a program 
                                        we need to create a represention of this information that our program can read.</p></div>
                                <div id="contentBox"><p> First we need to tell the program the strength of the covering array,
                                        in this case we want pairwise so 2.  <br /><br />  Next is the number of factors being tested.
                                        It's simple enough to count them and know we have 8.</p></div>
                            </div>

                            <!--Frame 40-->
                            <div id="40" style="display:none;" >
                                <?php echo options(); ?><br /><br />
                                <div id="contentBox"><p> Finally we need to go through all the factors in order and 
                                        list the number of values each one has.  <br /><br /> For instance the first factor 
                                        has 3 values, the second has 2 values, the third has 3 values, and the last five all have 2 values.</p></div>
                                <div id="contentBox"><p> Giving us this text representation.  <br /><br />  
                                    <table><tbody>
                                            <tr><td>2</td><td></td><td></td></tr>
                                            <tr><td>8</td><td></td><td></td></tr>
                                            <tr><td>3</td><td></td><td>1</td></tr>
                                            <tr><td>2</td><td></td><td>1</td></tr>
                                            <tr><td>3</td><td></td><td>1</td></tr>
                                            <tr><td>2</td><td></td><td>5</td></tr>
                                        </tbody></table></p></div>
                            </div>

                            <!-- Frame 41 -->
                            <div id="41" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web Configuration</p></div><br />
                                <table style ='width:80%;  margin-left:5%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> Running it through our program will generate this Covering
                                                        Array.<br
                                                            /><br />  From here it's a simple task to substitute the appropriate values for each factor into the array.</p></div></td>
                                            <td><?php echo webCA1(); ?></td>
                                        </tr></tbody></table>
                            </div>

                            <!-- Frame 42 -->
                            <div id="42" style="display: none;">
                                <div id="contentBox_wide_xl"><p>Web Configuration</p></div><br />
                                <table style ='width:91%;  margin-left:3%'><tbody><tr>
                                            <td><div id="contentBox_OA"><p> And here is our filled in covering array that 
                                                        covers all pairwise combinations of input in 9 configurations.<br
                                                            /><br />  It is much more feasible to run tests on these 9 configurations then the original 576.</p></div></td>
                                            <td><?php echo webCA2(); ?></td>
                                        </tr></tbody></table>
                            </div>


                            <!--Frame 43-->
                            <div id="43" style="display:none;" >
                                <div id="contentBox_wide_xl"><p>Recap. </p></div>
                                <div id="contentBox"><p>Combinatorial Interaction
                                        Testing is a powerful tool for testing with practical applications
                                        in Software Engineering. <br /><br />
                                        By finding out the total number of possible configurations and then
                                        designing an array that tests pairwise configurations
                                        you can reduce the size of your test suite in an intelligent manner.</p></div>
                                <div id="contentBox"><p> Next:  More Tutorials on the way.  <br /> <br /> 
                                        Please provide some feedback so we can continue to improve our website.
                                    <br /> <form method="post" action="formSubmit.php">
                                        Name: <input type="text" size="30" maxlength="40" name="name"> <br />
                                        Institution: <input type="text" size="20" maxlength="40" name="institution"> <br />
                                        <textarea rows="3" cols="29" wrap="physical" name="comments">Comment here </textarea>
                                        <?php
                                        unset($_SESSION['answer']);
                                        $num1 = rand(10, 20);
                                        $num2 = rand(1, 9);
                                        if ($op = rand(0, 1) == 1) {
                                            $eq = "$num1 + $num2";
                                            $_SESSION['answer'] = $num1 + $num2;
                                        } else {
                                            $eq = "$num1 - $num2";
                                            $_SESSION['answer'] = $num1 - $num2;
                                        }
                                        ?>
                                        Solve <?php echo $eq; ?> = <input name="answer" size="5" type="text" /><br />		
                                        <input type="submit" value="Submit">
                                    </form></p></div>
                            </div>

                            <div style="clear: both;"></div>
                            <div style="clear: both;"></div>
                        </div>

                    </div></div></div></div>
    </div>

    <div style="clear:none;"></div>
</body>

</html>

<?php

function PT1() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='max'>
               <tbody>
		 <tr>
		       <td style='border-right:1px solid black;'>Row</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
                   <tr>
		       <td style='border-right:1px solid black;'>0</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>1</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td>1</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>2</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td>1</td>
                       <td></td>
		       <td>2</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>3</td>
		       <td></td>
                       <td></td>
                       <td>1</td>
                       <td></td>
                       <td>3</td>
		       <td></td>
		       <td>3</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>4</td>
		       <td></td>
		       <td>1</td>
                       <td></td>
                       <td>4</td>
                       <td></td>
		       <td>6</td>
		       <td></td>
		       <td>4</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>5</td>
		       <td>1</td>
		       <td></td>
                       <td>5</td>
                       <td></td>
                       <td>10</td>
		       <td></td>
		       <td>10</td>
		       <td></td>
		       <td>5</td>
		       <td></td>
		       <td>1</td>
                   </tr>
               </tbody>
           </table>

   </div>";
    return $html;
}

function PT2() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='max'>
               <tbody>
		 <tr>
		       <td style='border-right:1px solid black;'>Row</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
                   <tr>
		       <td style='border-right:1px solid black;'>0</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>1</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td>1</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>2</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td>1</td>
                       <td></td>
		       <td>2</td>
		       <td></td>
		       <td style='background-color:gold;'>1</td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>3</td>
		       <td></td>
                       <td></td>
                       <td>1</td>
                       <td></td>
                       <td>3</td>
		       <td></td>
		       <td style='background-color:gold;'>3</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>4</td>
		       <td style='background-color:gold;'></td>
		       <td style='background-color:gold;'>1</td>
                       <td style='background-color:gold;'></td>
                       <td style='background-color:gold;'>4</td>
                       <td style='background-color:gold;'></td>
		       <td style='background-color:gold;'>6</td>
		       <td style='background-color:gold;'></td>
		       <td style='background-color:gold;'>4</td>
		       <td style='background-color:gold;'></td>
		       <td style='background-color:gold;'>1</td>
		       <td style='background-color:gold;'></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>5</td>
		       <td>1</td>
		       <td></td>
                       <td>5</td>
                       <td></td>
                       <td style='background-color:gold;'>10</td>
		       <td></td>
		       <td>10</td>
		       <td></td>
		       <td>5</td>
		       <td></td>
		       <td>1</td>
                   </tr>
               </tbody>
           </table>

   </div>";
    return $html;
}

function PT3() {
    $html = "<div id='table_tutorial_two' style='width: 60%; margin-left: 20%;'>
       <table class='max'>
               <tbody>
		 <tr>
		       <td style='border-right:1px solid black;'>Row</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
                   <tr>
		       <td style='border-right:1px solid black;'>0</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>1</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td>1</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>2</td>
		       <td></td>
                       <td></td>
                       <td></td>
                       <td>1</td>
                       <td></td>
		       <td>2</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>3</td>
		       <td></td>
                       <td></td>
                       <td>1</td>
                       <td></td>
                       <td>3</td>
		       <td></td>
		       <td>3</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
                       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>4</td>
		       <td></td>
		       <td>1</td>
                       <td></td>
                       <td>4</td>
                       <td></td>
		       <td style='background-color:lightgreen;'>6</td>
		       <td></td>
		       <td>4</td>
		       <td></td>
		       <td>1</td>
		       <td></td>
                   </tr>
		   <tr>
		       <td style='border-right:1px solid black;'>5</td>
		       <td>1</td>
		       <td></td>
                       <td>5</td>
                       <td></td>
                       <td>10</td>
		       <td></td>
		       <td>10</td>
		       <td></td>
		       <td>5</td>
		       <td></td>
		       <td>1</td>
                   </tr>
               </tbody>
           </table>

   </div>";
    return $html;
}

//0-No arrows
//1-headers
//2-content
//3-cookies
//4-Security
//5-History
function configurations($arrows) {

    $html = "<div id='form_tutorial_two'>
           <br /><span id='title_form_tutorial_two'>Content";

    if ($arrows == 1) {
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    }

    $html = $html . "</span><br />
              <span><select name='frame4content'>
                  <option>Allow Content to Load</option>
                  <option>Allow Insecure Images to Load</option>
                  <option>Allow All Cookies</option>
              </select>";

    if ($arrows == 2)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span>
            <br /><span><input type='checkbox' name='popups' value='ON' />Notify me when  pop-up is blocked</span>";
    if ($arrows == 2)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "<br /><br /><span id='title_form_tutorial_two'>Cookies";
    if ($arrows == 1)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";

    $html = $html . "</span><br />
              <span><select name='cookies'>
                  <option>Allow all cookies</option>
                  <option>Restrict how third party cookies can be used</option>
                  <option>Block all cookies</option>
              </select>";
    if ($arrows == 3)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span><br /><br />
                <span id='title_form_tutorial_two'>Security";
    if ($arrows == 1)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span><br />
              <span><input type='checkbox' name='security1' value='ON' />Warn me when sites try to install add-ons";
    if ($arrows == 4)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span>
              <br /><span><input type='checkbox' name='security2' value='ON' />Tell me if a site I am visiting is a suspect attack site";
    if ($arrows == 4)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span>
              <br /><span><input type='checkbox' name='security3' value='ON' />Tell me if a site I am visiting is a suspect forgery";
    if ($arrows == 4)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span>
              <br /> <br /><span id='title_form_tutorial_two'>History";
    if ($arrows == 1)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span><br />
 <span><input type='checkbox' name='history1' value='ON' />Remember what I enter in forms and the search bar";
    if ($arrows == 5)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span>
                <br /><span><input type='checkbox' name='history2' value='ON' />Remember what I've downloaded";
    if ($arrows == 5)
        $html = $html . "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = $html . "</span>
<span id='buttons_tutorial_two'><input type='hidden' value='Cancel' name='frame4_cancel' /><input type='hidden' value='Submit' name='frame4_submit' /></span>
         </div>";

    return $html;
}

function options($columns) {
    $html = " <div id='table_tutorial_two'>";



    $html = $html . "<table style='border-collapse: collapse;' id='options'>";
    for ($i = 0; $i < $columns; $i+=1) {
        $html = $html . " <col style='border: 3px solid #FFFF00; border-right: 3px solid #FFFF00; border-top: 3px solid #FFFF00;'/>";
    }

    if ($columns > 0) {
        $html = $html . "<col span='" . (8 - $columns) . "'/>";
    }
    $html = $html . "
            <thead>
              <tr>
                  <th>Content Drop Down</th>
                  <th>Content Check Box</th>
                  <th>Cookies Drop Down</th>
                  <th>Security Check Box 1</th>
                  <th>Security Check Box 2</th>
                  <th>Security Check Box 3</th>
                  <th>History Check Box 1</th>
                  <th>History Check Box 2</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Allow</td>
                  <td>True</td>
                  <td>Allow</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
              </tr>
              <tr>
                  <td>Restrict</td>
                  <td>False</td>
                  <td>Restrict</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
              </tr>
              <tr>
                  <td>Block</td>
                  <td></td>
                  <td>Block</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
          </tbody>
      </table></div>";
    return $html;
}

function options2() {
    $html = "<div id='table_tutorial_two'>
       <table id='options' style='width: 100%; font-size: 10pt;'>
               <thead>
		 <tr>
                  <th>Strikethrough</th>
                  <th>Double Strikethrough</th>
                  <th>Superscript</th>
                  <th>Subscript</th>
                  <th>Shadow</th>
                  <th>Outline</th>
                  <th>Emboss</th>
                  <th>Engrave</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
                  <td>True</td>
              </tr>
              <tr>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
                  <td>False</td>
              </tr>
               </tbody>
           </table>

   </div>";
    return $html;
}

function par_effects($arrows) {
    $arrow = "<img src='public/tutorials/images/green_left.bmp'/>";
    $html = "<div id='form_tutorial_two' style='width:340px; height:200px;'><br /><br />
	     <span id='title_form_tutorial_two'>Paragrpah Space</span><br />
            <span><input type='checkbox' name='popups' value='ON' />Don't add space between paragraphs of the same style";
    if ($arrows == 1)
        $html = $html . $arrow;

    $html = $html . "</span><br /><br />
	    <span id='title_form_tutorial_two'>Indentation</span><br />
	    <span><input type='checkbox' name='popups' value='ON' />Mirror Indents";

    if ($arrows == 1)
        $html = $html . $arrow;

    $html = $html . "</span><br /><br />
	    <span id='title_form_tutorial_two'>Line Spacing</span><br />
                <span><select><option>Single</option><option>Double</option><option>Multiple</option></select>";

    if ($arrows == 1)
        $html = $html . $arrow;
    $html = $html . "</span>
                
        <span id='buttons_tutorial_two' style='float: right;'><input type='hidden' value='Accept' name='frame4_cancel' />
            <input type='hidden' value='Cancel' name='frame4_submit' /></span>
         </div>";
    return $html;
}

function par_options() {
    $html = "<div id='table_tutorial_two' style='margin-left:17%; width:65%;'>
       <table id='options' style='width: 95%; font-size: 10pt;'>
               <thead>
		 <tr>
                  <th>Paragraph Space</th>
                  <th>Indentation</th>
                  <th>Line Spacing</th>
             </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Selected</td>
                  <td>Selected</td>
                  <td>Single</td>
              </tr>
	      <tr>
                  <td>Unselected</td>
                  <td>Unselected</td>
                  <td>Double</td>
              </tr>
	      <tr>
                  <td></td>
                  <td></td>
                  <td>Multiple</td>
              </tr>
               </tbody>
           </table>

   </div>";
    return $html;
}

function all_configurations($frame) {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 145%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='left'";
    if ($frame == 4)
        $html = $html . "id='right'";
    $html = $html . ">Single</td>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='right'";
    if ($frame == 3)
        $html = $html . "id='left'";
    $html = $html . ">Indent Selected</td>
                       <td ";
    if ($frame == 3)
        $html = $html . "id='right'";
    if ($frame == 4)
        $html = $html . "id='left'";
    $html = $html . ">Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='left'";
    $html = $html . ">Single</td>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='right'";
    $html = $html . ">Indent Unselected</td>
                       <td>Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 4)
        $html = $html . "id='right'";
    $html = $html . ">Single</td>
                       <td ";
    if ($frame == 3)
        $html = $html . "id='left'";
    $html = $html . ">Indent Selected</td>
                       <td ";
    if ($frame == 3)
        $html = $html . "id='right'";
    if ($frame == 4)
        $html = $html . "id='left'";
    $html = $html . ">Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td>Single</td>
                       <td>Indent Unselected</td>
                       <td>Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='left'";
    if ($frame == 4)
        $html = $html . "id='right'";
    $html = $html . ">Multiple</td>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='right'";
    $html = $html . ">Indent Selected</td>
                       <td ";
    if ($frame == 4)
        $html = $html . "id='left'";
    $html = $html . ">Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='left'";
    $html = $html . ">Multiple</td>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='right'";
    if ($frame == 3)
        $html = $html . "id='left'";
    $html = $html . ">Indent Unselected</td>
                       <td ";
    if ($frame == 3)
        $html = $html . "id='right'";
    $html = $html . ">Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 4)
        $html = $html . "id='right'";
    $html = $html . ">Multiple</td>
                       <td>Indent Selected</td>
                       <td ";
    if ($frame == 4)
        $html = $html . "id='left'";
    $html = $html . ">Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td>Multiple</td>
                       <td ";
    if ($frame == 3)
        $html = $html . "id='left'";
    $html = $html . ">Indent Unselected</td>
                       <td ";
    if ($frame == 3)
        $html = $html . "id='right'";
    $html = $html . ">Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='left'";
    if ($frame == 4)
        $html = $html . "id='right'";
    $html = $html . ">Double</td>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='right'";
    $html = $html . ">Indent Selected</td>
                       <td ";
    if ($frame == 4)
        $html = $html . "id='left'";
    $html = $html . ">Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='left'";
    $html = $html . ">Double</td>
                       <td ";
    if ($frame == 2)
        $html = $html . "id='right'";
    $html = $html . ">Indent Unselected</td>
                       <td>Paragraph Selected</td>
                   </tr>
                   <tr>
                     <td ";
    if ($frame == 4)
        $html = $html . "id='right'";
    $html = $html . ">Double</td>
                       <td>Indent Selected</td>
                       <td ";
    if ($frame == 4)
        $html = $html . "id='left'";
    $html = $html . ">Paragraph Unselected</td>
                   </tr>
                   <tr>
                     <td>Double</td>
                       <td>Indent Unselected</td>
                       <td>Paragraph Unselected</td>
                   </tr>
               </tbody>
           </table>
   </div>";
    return $html;
}

function subset() {
    $html = "<div id='table_tutorial_two' style='width: 100%; margin-left: 20%;'>
       <table id='options' style='width: 150%; font-size: 11pt; border: 2px solid #2293FF;'>
               <tbody>
                   <tr>
                       <td>Single</td>
                       <td>Indent Selected</td>
                       <td>Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td>Single</td>
                       <td>Indent Unselected</td>
                       <td>Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td>Multiple</td>
                       <td>Indent Selected</td>
                       <td>Paragraph Selected</td>
                   </tr>
                   <tr>
                       <td>Multiple</td>
                       <td>Indent Unselected</td>
                       <td>Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td>Double</td>
                       <td>Indent Selected</td>
                       <td>Paragraph Unselected</td>
                   </tr>
                   <tr>
                       <td>Double</td>
                       <td>Indent Unselected</td>
                       <td>Paragraph Selected</td>
                   </tr>
               </tbody>
           </table>

   </div>";
    return $html;
}

function webCA1() {
    $html = "<div id='table_tutorial_two' style='width: 90%; Font-size:75%; Padding:3px;'>
       <table class='max'>
            <tbody>
				<tr>
					<td>0</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
                </tr> 
				<tr>
					<td>2</td>
					<td>1</td>
					<td>0</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
                </tr>
				<tr>
					<td>1</td>
					<td>0</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
                </tr>
				<tr>
					<td>2</td>
					<td>1</td>
					<td>2</td>
					<td>0</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
                </tr>
				<tr>
					<td>0</td>
					<td>0</td>
					<td>2</td>
					<td>1</td>
					<td>0</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
                </tr>
				<tr>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
                </tr>
				<tr>
					<td>2</td>
					<td>0</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
					<td>0</td>
                </tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>2</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
					<td>1</td>
                </tr>
				<tr>
					<td>1</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
					<td>0</td>
					<td>0</td>
					<td>1</td>
                </tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
                </tr>
            </tbody>
        </table>

   </div>";
    return $html;
}

function webCA2() {
    $html = "<div id='table_tutorial_two' style='width: 90%; Font-size:75%; Padding:3px;'>
       <table class='max_xl'>
            <tbody>
			    <tr style='Border-bottom:1px solid black;'>
					<td>Content Drop Down</td>
					<td>Content Check Box</td>
					<td>Cookies Drop Down</td>
					<td>Security Check Box 1</td>
					<td>Security Check Box 2</td>
					<td>Security Check Box 3</td>
					<td>History Check Box 1</td>
					<td>History Check Box 2</td>
                </tr> 
			    <tr>
					<td>Allow</td>
					<td>False</td>
					<td>Restrict</td>
					<td>False</td>
					<td>False</td>
					<td>True</td>
					<td>True</td>
					<td>False</td>
                </tr>
				<tr>
					<td>Block</td>
					<td>False</td>
					<td>Allow</td>
					<td>False</td>
					<td>True</td>
					<td>True</td>
					<td>True</td>
					<td>True</td>
                </tr>
				<tr>
					<td>Restrict</td>
					<td>True</td>
					<td>Restrict</td>
					<td>False</td>
					<td>False</td>
					<td>False</td>
					<td>True</td>
					<td>True</td>
                </tr>
				<tr>
					<td>Block</td>
					<td>False</td>
					<td>Block</td>
					<td>True</td>
					<td>False</td>
					<td>False</td>
					<td>False</td>
					<td>False</td>
                </tr>
				<tr>
					<td>Allow</td>
					<td>True</td>
					<td>Block</td>
					<td>False</td>
					<td>True</td>
					<td>False</td>
					<td>True</td>
					<td>True</td>
                </tr>
				<tr>
					<td>Allow</td>
					<td>True</td>
					<td>Allow</td>
					<td>True</td>
					<td>True</td>
					<td>False</td>
					<td>False</td>
					<td>False</td>
                </tr>
				<tr>
					<td>Block</td>
					<td>True</td>
					<td>Restrict</td>
					<td>True</td>
					<td>True</td>
					<td>True</td>
					<td>False</td>
					<td>True</td>
                </tr>
				<tr>
					<td>Restrict</td>
					<td>False</td>
					<td>Block</td>
					<td>False</td>
					<td>True</td>
					<td>True</td>
					<td>False</td>
					<td>False</td>
                </tr>
				<tr>
					<td>Restrict</td>
					<td>True</td>
					<td>Allow</td>
					<td>True</td>
					<td>False</td>
					<td>True</td>
					<td>True</td>
					<td>False</td>
                </tr>
            </tbody>
        </table>

   </div>";
    return $html;
}

function formSubmit() {
    print ("Your comment has been submitted $name. Thank you.<br>\n");
    $filename = 'comment.txt';
    $fp = fopen($filename, "a");
    fwrite($fp, ", $comments");
    fclose($fp);
}

